<template>
  <div class="hu-steps-body">
    <van-loading class="hu-page-loading" v-if="loading" type="spinner" />
    <template v-else>
      <!-- 步骤条 -->
      <HuSteps v-bind="$attrs" />
      <div class="hu-steps-body--cont">
        <slot name="default"></slot>
      </div>
      <!-- 底部按钮 -->
      <HuStepsButton
        :active="$attrs.active"
        :last-active="$attrs.steps.length - 1"
        v-bind="$attrs"
        @preStep="preStep"
        @nextStep="nextStep"
        @centerStep="centerStep"
      />
    </template>
  </div>
</template>

<script>
import HuSteps from "./HuSteps.vue";
import HuStepsButton from "./HuStepsButton.vue";

export default {
  name: "HuStepsBody",
  components: {
    HuSteps,
    HuStepsButton,
  },
  props: {
    loading: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {};
  },
  methods: {
    // 上一步
    preStep() {
      // this.active--;
      this.$emit("preStep");
    },
    nextStep() {
      // 下一步
      // this.active++;
      this.$emit("nextStep");
    },
    centerStep() {
      this.$emit("centerStep");
    },
  },
};
</script>

<style lang="less">
.hu-steps-body--cont {
  height: calc(100vh - 205px);
  /* 兼容 ios系统 */
  height: calc(
    100vh - 205px - env(safe-area-inset-top) - env(safe-area-inset-bottom)
  );
}
.hu-page-loading {
  text-align: center;
  margin-top: 10px;
}
</style>
